<template>
  <!-- 搜索页面 -->
  <div class="search">
    <!-- 顶部搜索 -->
    <div class="search-title">
      <uni-search-bar
        class="bar"
        radius="5"
        placeholder="请输入内容"
        clearButton="always"
        cancelButton="always"
        @confirm="onSearch"
        @cancel="onClear"
        @clear="onClear"
        v-model="queryParams.keyword"
      />
    </div>

    <div class="sousuo" v-if="!classList.length">
      <!-- 最近搜索 -->
      <div class="search-zuijin-title" v-if="historySearch.length !== 0">
        <div class="left">最近搜索</div>

        <div class="right" @click="removeHistory">
          <uni-icons type="trash" size="30"></uni-icons>
        </div>
      </div>

      <div class="search-zuijin">
        <div
          class="tag"
          v-for="item in historySearch"
          :key="item"
          @click="clickTab(item)"
        >
          {{ item }}
        </div>
      </div>

      <!-- 热门搜索 -->
      <div class="search-hot-title">
        <div class="left">热门搜索</div>
      </div>

      <div class="search-hot">
        <div
          class="tag"
          v-for="item in recommendList"
          :key="item"
          @click="clickTab(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <!-- 没有更多图片 -->
    <view v-if="noSearch"> 没有更多图片 </view>

    <!-- 展示搜索图片 -->
    <div class="image" v-else>
      <view class="list" v-for="item in classList" :key="item._id">
        <navigator :url="`/pages/Look/index?id=${item._id}`" class="list">
          <image mode="scaleToFill" :src="item.smallPicurl"></image>
        </navigator>
      </view>
    </div>

    <view class="loading" v-if="noData || classList.length">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onUnload, onReachBottom } from "@dcloudio/uni-app";
import { getSearchAPI } from "@/api/apis.js";

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  keyword: "",
});

// 搜索历史词
const historySearch = ref(uni.getStorageSync("historySearch") || []);
// 热门搜索词
const recommendList = ref(["美女", "帅哥", "动漫"]);

// 没有更多
const noData = ref(false);
// 没有搜索结果
const noSearch = ref(false);
// 搜索结果列表
const classList = ref([]);

// 点击搜索
const onSearch = () => {
  historySearch.value = [
    ...new Set([queryParams.value.keyword, ...historySearch.value]),
  ];
  uni.setStorageSync("historySearch", historySearch.value);
  searchData();
};

// 点击清除
const onClear = () => {
  initParams();
};

// 点击标签进行搜索
const clickTab = (value) => {
  initParams();
  queryParams.value.keyword = value;
  onSearch();
};

// 点击清空搜索记录
const removeHistory = () => {
  uni.showModal({
    title: "是否清空历史搜索？",
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync("historySearch");
        historySearch.value = [];
      }
    },
  });
};

// 触底加载更多
onReachBottom(() => {
  if (noData.value) return;
  queryParams.value.pageNum++;
  searchData();
});

// 关闭页面
onUnload(() => {});

//初始化数据
const initParams = () => {
  classList.value = [];
  noData.value = false;
  noSearch.value = false;

  queryParams.value = {
    pageNum: 1,
    pageSize: 12,
    keyword: "",
  };
};

// 请求的数据
const searchData = async () => {
  const res = await getSearchAPI(queryParams.value);
  classList.value = [...classList.value, ...res.data.data];
  uni.setStorageSync("FenLeiList_List", classList.value);

  if (queryParams.value.pageSize > res.data.length) noData.value = true;
  if (res.data.length == 0 && classList.value.length == 0)
    noSearch.value = true;
};
</script>

<style scoped lang="scss">
.search {
  padding: 20rpx;
  font-family: 微软雅黑;

  .search-title {
    width: 100%;
    display: flex;
    height: 70rpx;
    align-items: center;

    .bar {
      width: 100%;
    }
  }

  .search-zuijin-title,
  .search-hot-title {
    display: flex;
    justify-content: space-between;
    margin: 30rpx auto;

    .left {
      color: gray;
      font-size: 40rpx;
    }
  }

  .search-zuijin,
  .search-hot {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    width: fit-content;
    margin-left: 10rpx;
    padding: 5rpx 20rpx;
    border-radius: 40rpx;
    background-color: #93e0ff21;
    border: 1px solid #93e1ff;
  }

  .image {
    display: flex;
    gap: 24rpx;
    flex-wrap: wrap;
    margin-top: 30rpx;

    .list {
      width: 220rpx;
      height: 400rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
}
</style>